<template>
  <!-- 数字输入框  根据分区变化金额单位符号 -->
  <div class="inpout-layout">
    <el-input
      :type="inputType"
      :value="value"
      :placeholder="placeholder"
      :size="size"
      style="width: 100%;"
      :disabled="disabled"
      @input="handleInput"
      @focus="eyeShow=true"
      @blur="eyeShow=false"
    >

      <div slot="prefix">
        <slot></slot>
      </div>

      <i
        v-if="(eyeShow||value)&&inputType==='password'"
        slot="suffix"
        style="font-size: 12px;color: #d9d9d9;"
        class="iconfont icon-yanjing  biyang"
        @click="inputType='text'"
      ></i>
      <i
        v-if="(eyeShow||value)&&inputType==='text'"
        slot="suffix"
        style="font-size: 12px; color: #d9d9d9"
        class="iconfont icon-yanjing"
        @click="inputType='password'"
      ></i>
    </el-input>
  </div>
</template>
<script>
import {
  // mapGetters,
  mapState
} from 'vuex'
export default {
  name: '',

  model: {
    prop: 'value',
    event: 'input'
  },

  props: {
    // 输入框的值
    value: Number || String,
    placeholder: {
      type: String,
      default: '请输入'
    },
    size: {
      type: String

    },
    disabled: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      inputType: 'password', // password,text
      eyeShow: false

    }
  },

  watch: {

  },
  // ������
  created() {},
  // ���غ�
  mounted() {

  },
  // ���ٺ�
  destroyed() {

  },

  // ����
  methods: {
    handleInput(e) {
      // 禁止输入中文
      const value = e.replace(/[^a-za-z0-9u4e00-u9fa5.,:[]{}\~\'\"\+\@\-\_!$%#&\*\/\\]/g, '')
      this.$emit('input', value)
    }
  }
}
</script>

<style scoped lang="scss">
  .icon-yanjing{
   cursor: pointer;
  }
  .biyang {
    position: relative;

    &::after {
      display: inline-block;
      position: absolute;
      content: '2';
      font-size: 0;
      width: 2px;
      height: 18px;
      top: 46%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(45deg);
      background-color: rgb(217, 217, 217);
    }
  }

  @media screen and (max-width: 1400px) {
    .icon-yanjing {
      font-size: 10px !important;
    }
  }

</style>
